<template>
  <div class="tag-cloud">
    <b-list-group>
      <b-list-group-item class="asideContent-title d-flex align-items-center pb-1">
        <b-icon icon="tag"></b-icon>
        <h2>标签云</h2>
      </b-list-group-item>
      <b-list-group-item class="list-group-item-on">
        <ul class="aside-tags-list">
          <li v-for="(item,index) in tags" :key="index">
            <nuxt-link to="#" :style="{color:randomRgbColor(),fontSize:parseInt(Math.random() * 18) + 14 + 'px'}">
              {{item}}
            </nuxt-link>
          </li>
        </ul>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags:['js','html','css','ui','linux','自定义']
    }
  },
  methods:{
    randomRgbColor() { //随机生成RGB颜色
      var r = Math.floor(Math.random() * 256); //随机生成256以内r值
      var g = Math.floor(Math.random() * 256); //随机生成256以内g值
      var b = Math.floor(Math.random() * 256); //随机生成256以内b值
      return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
    }
  }
}
</script>

<style>
  .tag-cloud {
    margin-top: 25px;
  }
  .aside-tags-list {
    display: flex;
    flex-wrap: wrap;
  }
  .aside-tags-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 8px;
  }
  [data-theme="dark"] .aside-tags-list li a {
    color: #fff!important;
  }
  .aside-tags-list li a:hover {
    color: var(--primary)!important;
  }
</style>